<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm = "searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
                           <div>
							   <el-button type="success"  size="mini" icon="el-icon-plus"  @click="add(ids)" v-if="checkPermission('/admin/Test/add.html')" >{{$t('action.add')}}</el-button>   
                               <el-button type="success" :disabled="single" size="mini" icon="el-icon-plus"  @click="clone(ids)" v-if="checkPermission('/admin/Test/clone.html')" >{{$t('action.clone')}}</el-button>  
                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-edit"  @click="update(ids)" v-if="checkPermission('/admin/Test/update.html')" >{{$t('action.update')}}</el-button>  
							   <el-button type="danger" :disabled="multiple" size="mini" icon="el-icon-delete"  @click="del(ids)" v-if="checkPermission('/admin/Test/delete.html')" >{{$t('action.delete')}}</el-button>     
                               <el-button type="info" :disabled="single" size="mini" icon="el-icon-view"  @click="detail(ids)" v-if="checkPermission('/admin/Test/detail.html')" >{{$t('action.detail')}}</el-button>  
                           </div>
                           <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
						<el-table highlight-current-row @current-change="selection"  row-key="id" @sort-change="sortChange" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list" :summary-method="getSummaries" show-summary style="width: 100%">
							<el-table-column align="center" type = '' v-if="fieldList[0].checked" property="id" label="ID" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[1].checked" property="title" :label="$t('field.Test_title')" show-overflow-tooltip width="" sortable="custom">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="dropdown_int" :label="$t('field.Test_dropdown_int')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag type="info" v-if="scope.row.dropdown_int == '1'" size="mini" effect="dark">Apple</el-tag>
							          <el-tag type="info" v-if="scope.row.dropdown_int == '2'" size="mini" effect="dark">Banana</el-tag>
							          <el-tag type="info" v-if="scope.row.dropdown_int == '3'" size="mini" effect="dark">pineapple</el-tag>
							          <el-tag type="info" v-if="scope.row.dropdown_int == '4'" size="mini" effect="dark">melon</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="dropdown_char" :label="$t('field.Test_dropdown_char')" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag type="info" v-if="scope.row.dropdown_char == '1'" size="mini" effect="dark">Dog</el-tag>
							          <el-tag type="info" v-if="scope.row.dropdown_char == '2'" size="mini" effect="dark">Cat</el-tag>
							          <el-tag type="info" v-if="scope.row.dropdown_char == '3'" size="mini" effect="dark">Pig</el-tag>
							          <el-tag type="info" v-if="scope.row.dropdown_char == '4'" size="mini" effect="dark">Goose</el-tag>
							       </template>    
							 </el-table-column>
                             <el-table-column align="center"  v-if="fieldList[4].checked" property="image_single" :label="$t('field.Test_image_single')" show-overflow-tooltip width="">
								<template slot-scope="scope">
									<div class="demo-image__preview">
										<el-image v-if="scope.row.image_single" class="table_list_pic" :src="scope.row.image_single"  :preview-src-list="[scope.row.image_single]"></el-image>
									</div>
								</template>
							 </el-table-column>
							 <el-table-column align="center"  v-if="fieldList[5].checked" property="file_single" :label="$t('field.Test_file_single')" show-overflow-tooltip width="">
								<template slot-scope="scope">
									<el-link v-if="scope.row.file_single" style="font-size:13px;" :href="scope.row.file_single" target="_blank">下载附件</el-link>
								</template>
							 </el-table-column>
							 <el-table-column align="center"  v-if="fieldList[7].checked" property="status" :label="$t('field.Test_status')" show-overflow-tooltip width="">
								<template slot-scope="scope">
									<el-switch @change="updateExt(scope.row,'status')" :active-value="0" :inactive-value="1" v-model="scope.row.status"></el-switch>
								</template>
							 </el-table-column>
							 <el-table-column align="center"  v-if="fieldList[8].checked" property="number_updown" :label="$t('field.Test_number_updown')" show-overflow-tooltip width="">
							 </el-table-column>
							 <el-table-column align="center"  v-if="fieldList[9].checked" property="oper_time" :label="$t('field.Test_oper_time')" show-overflow-tooltip width="" sortable="custom">
								<template slot-scope="scope">
									{{parseTime(scope.row.oper_time)}}
								</template>
							 </el-table-column>
							  <el-table-column :fixed="$store.getters.device !== 'mobile'?'right':false" :label="$t('system.operation')" align="center" width="160">
								<template slot-scope="scope">
									<div v-if="scope.row.id">
										<el-button size="mini" type="primary" @click="update(scope.row)"  v-if="checkPermission('/admin/Test/update.html')"><i class="el-icon-edit" />{{$t('action.update')}}</el-button>
										<el-button size="mini" type="danger" @click="del(scope.row)"  v-if="checkPermission('/admin/Test/delete.html')"><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
									</div>
								</template>
							  </el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
	    <!--添加-->
		<Add  :show.sync="dialog.addDialogStatus" size="small" @refresh_list="index"></Add>
		<!--复制添加-->
		<Clone :info="cloneInfo" :show.sync="dialog.cloneDialogStatus" size="small" @refresh_list="index"></Clone>
		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refresh_list="index"></Update>
		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
	</div>
</template>
<script>
	import {
	    index, 
	    updateExt, 
	    getUpdateInfo,
	    del,
	} from '@/api/admin/test'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
	import Add from '@/views/admin/test/add.vue' 
	import Clone from '@/views/admin/test/clone.vue' 
	import Update from '@/views/admin/test/update.vue' 
	import Detail from '@/views/admin/test/detail.vue' 
	export default {
		name:'test',
		components: {
			Search,
			Page,
			TableTool,
	        Add,  
	        Clone,  
	        Update,  
	        Detail,  
		},
		data(){
			return {
				dialog: {
	                    addDialogStatus : false,     
	                    cloneDialogStatus : false,     
	                    updateDialogStatus : false,     
	                    detailDialogStatus : false,     
				},
				fieldList:[
					{lable:'ID',checked:true},
				    {lable:this.$t('field.Test_title'),checked:true},
				    {lable:this.$t('field.Test_dropdown_int'),checked:true},
				    {lable:this.$t('field.Test_dropdown_char'),checked:true},
				    {lable:this.$t('field.Test_image_single'),checked:true},
				    {lable:this.$t('field.Test_file_single'),checked:true},
				    {lable:this.$t('field.Test_address'),checked:true},
				    {lable:this.$t('field.Test_status'),checked:true},
				    {lable:this.$t('field.Test_number_updown'),checked:true},
				    {lable:this.$t('field.Test_oper_time'),checked:true},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},
	            addInfo:{},
	            cloneInfo:{},
	            updateInfo:{},
	            detailInfo:{},
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
	            sort:'',
	            order:'',
				searchVisible:true,
				searchForm:[],
				searchData:{},
			}
		},
		methods: {
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page,sort:this.sort,order:this.order}
				Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						        {type:'Input',label:this.$t('field.Test_title'),prop:'title',width:'150px'},   
						        {type:'datetime',label:this.$t('field.Test_oper_time'),prop:'oper_time',width:'150px'},
						]
					}
				})
			},
			updateExt(row,field){
				if(row.id){
					updateExt({id:row.id,[field]:row[field]}).then(res => {
						this.$message({message: this.$t('system.success'), type: 'success'})
					})
				}
			},
			add(){
				this.dialog.addDialogStatus = true
			},
			clone(row){
				let id = row.id ? row.id : this.ids.join(',')
				getUpdateInfo({id:id}).then(res => {
					if(res.status == 200){
						this.dialog.cloneDialogStatus = true
						this.cloneInfo = res.data
					}
				})
			},
			update(row){
				let id = row.id ? row.id : this.ids.join(',')
				getUpdateInfo({id:id}).then(res => {
					if(res.status == 200){
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data
					}
				})
			},
			del(row){
				confirm({content:this.$t('system.confirmOperation')}).then(() => {
					let ids = row.id ? row.id : this.ids.join(',')
					del({id:ids}).then(res => {
						this.$message({message: res.msg, type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {id:row.id ? row.id : this.ids.join(',')}
			},
		  sortChange(column) {
			  //排序的字段是属性名
			  this.sort = column.prop;
			  //排序的方式是根据上下选择来确定
			  if(column.order == 'ascending'){
			    this.order='asc'
			    }
			  if(column.order=='descending'){
			    this.order='desc'
			  }  
			  //此方法为获取数据的方法
			  this.index();
		},
  
		  getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
			     if (index === 0) {
				   sums[index] = this.$t('system.summary');
				   return;
				 }
		    if (column.property === 'status' || column.property === 'number_updown' ) {
				     const values = data.map(item => Number(item[column.property]));
							sums[index] = values.reduce((prev, curr) => {
							 const value = Number(curr);
							 if (!isNaN(value)) {
							   return prev + curr;
							 } else {
							   return prev;
							 }
							}, 0);
							sums[index];
 
				     }
				});
				return sums
	   },
  
		    selection(selection) {
		        this.selectRows=[]
		        this.selectRows.push(selection)
		        this.selectTotal=this.selectRows.length
				this.ids = []
				this.ids.push(selection.id)
				this.single = false
			 },
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>